<template>
  <div class="container">
    <div class="title">
      <span>请选择商品:</span>
    </div>
    <div class="info">
      <div class="nothing" v-if="!products || products.length === 0">
        <span>暂无可提商品</span>
      </div>
      <div class="address" v-else>
        <div class="list">
          <div class="list-item" v-for="(item, index) in products" :key="index">
            <div class="desc">
              <div class="desc-item">
                <span class="value">{{item.title}}</span>
              </div>
              <div class="desc-item">
                <div class="image" v-if="item.mainImage">
                  <img v-lazy="item.mainImage.thumbnail_path" style="width: 60px; margin-top: 10px" />
                </div>
              </div>
            </div>
            <div class="x">
              <span class="t">选择数量:</span>
              <div class="px">
                <input class="n" v-model.number="item.num" @change="changeProductNum(item)" />
                <span>盒</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['products'],
  methods: {
    changeProductNum(item) {
      this.$emit('changeProductNum', item)
    }
  }
}
</script>

<style scoped lang="stylus">
.container {
  margin: 10px;
  padding: 10px;
  background: white;
  border-radius: 5px;
}

.title {
  text-align: left;
}

.title text {
  font-weight: 700;
}

.info {
  padding: 10px 0;
  /*background: red;*/
}

/* nothing */
.nothing {
  text-align: left;
}
.nothing text {
  color: red;
}

/* list */
.list {
  font-size 14px
}

input {
  text-align center
  margin-right 5px
}

.list-item {
  display: flex;
  margin-bottom: 17px;
  border-bottom: 1px solid #f3f5f7;
  padding-bottom: 15px;
}
.list-item:last-child {
  border: none;
}

.selected {
  width: 30px;
  /*background: red;*/
  box-sizing: border-box;
  padding-top: 20px;
}

.selected .icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 1px solid #ccc;
}

.selected .active {
  background: $main_color;
  /*border: 1px solid white;*/
  position: relative;
  border-color: $main_color;
}

.selected .ch {
  /*background: white;*/
  position: absolute;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  /*left: 15rpx;*/
  left: 5px;
  /*top: 8px;*/
  top: 0px;
  color: white;
}

.desc {
  flex: 1.5;
  /*background: blue;*/
}
.desc-item {
  display: flex;
}
.desc .text {
  width: 80px;
  text-align: right;
}
.desc .value {
  flex: 1;
  padding-left: 5px;
  color: #666;
  text-align: left;
}
.x {
  flex: 1;
  padding-top: 30px;
  /*background: red;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.x .n {
  border: 1px solid #eee;
  width: 75px;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  border-radius: 5px;
}

/* add */
.add text {
  color: red;
}

/*---------------------------------*/
.image {
}
.image img {
  width: 60px;
  margin-top: 5px;
}

.px {
  display: flex;
  align-items: center;
}
.px text {
  margin-left: 5px;
}
</style>
